<template>
	<view class="content">
		<!-- 使用css画一段圆弧 -->
		<view class="pure_top"></view>
		<view class="usercenter">
			<view class="card">
				<span class="name">
					<image src="../../static/wechat.jpeg" @click="showImg('../../static/wechat.jpeg')"/>
				</span>
				<view class="message">
					<view class="message_title">公益情怀 · 公信平台</view>
					<view style="font-size: 13px;">坤小物 竭诚为您服务</view>
				</view>
			</view>
		</view>
		<view class="shop_message">
			<view class="tel shop_message_item"  @click="telPhone('13184603877')" >
				<span>联系方式</span>
				<span style="display: flex; align-items: center;">
					13184603877<view class="icon">&#xe62d;</view>
				</span>
			</view>
			<view class="tel shop_message_item"  @click="telPhone('0335-3350050')" >
				<span>座机</span>
				<span style="display: flex; align-items: center;">
					0335-3350050<view class="icon">&#xe62d;</view>
				</span>
			</view>
			<view class="wechat shop_message_item"><span>微信号</span><span>kwgxs900</span></view>
		</view>
		<view class="shop_message_blank"></view>
	</view>
</template>

<script>
	export default {
		methods:{
			telPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel,
				})
			},
			// 图片预览的功能
			showImg(url) {
				uni.previewImage({
					current: url,
					urls: [url]
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
page {
	height: 100%;
	background: white;
}
@font-face {
	font-family: 'iconfont';
	src: url('../../css/font/iconfont.eot');
	src: url('../../css/font/iconfont.eot?#iefix') format('embedded-opentype'),
	url('../../css/font/iconfont.woff') format('woff'),
	url('../../css/font/iconfont.ttf') format('truetype'),
	url('../../css/font/iconfont.svg#iconfont') format('svg');
}
.icon {
	font-family:"iconfont" !important;
	font-weight: 200;
	font-size: 30upx;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;
	cursor: pointer;
	&:hover {
		color: #E80505;
	}
}
.content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.pure_top {
		width: 100%;  
		height: 200upx;  
		position: relative;  
		left: 0;
		top: 0;
		z-index: 1;  
		overflow: hidden;
		margin-bottom: -160upx;
		&:after {
			content: '';
			width: 110%; 
			height: 100px;
			position: absolute;
			left: -5%;
			top: 0;
			z-index: -1;
			border-radius: 0 0 50% 50%;
			background:linear-gradient( 135deg, #FDD819 10%, #E80505 100%);
		}
	}
	.usercenter {
		box-sizing: border-box;
		.card {
			margin: 20upx 32upx 0upx;
			margin-bottom: 40upx;
			padding: 80upx 40upx 50upx;
			background: #fff;
			border-radius: 12upx;
			box-sizing: border-box;
			box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
			position: relative;
			display: flex;
			height: 300upx;
			z-index: 100;
			.name {
				font-size: 28upx;
				color: #999;
				display: flex;
				align-items: center;
				image {
					width: 160upx;
					height: 160upx;
					margin-right: 20upx;
					// border-radius: 50%;
					border: 4upx solid #eee;
				}
			}
			.message {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-top: 20upx;
				color: #666;
				.message_title {
					margin-bottom: 20upx;
					font-size: 36upx;
					color: #555;
				}
			}
		}
	}
	.shop_message {
		width: 100%;
		background-color: #fff;
		padding: 0 40upx;
		color: #999;
		box-sizing: border-box;
		.shop_message_item {
			line-height: 80upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid #f0f0f0;
			.tel_right {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
		}
	}
	.shop_message_blank {
		flex: 1;
		background: #f8f8f8;
	}
}
</style>
